<template>
  <div class="cutting-machine-status">
    <div class="status-card">
      <h2 class="card-title">切割机床实时状态</h2>
      <div class="status-grid">
        <!-- 切割计数 -->
        <div class="status-item">
          <div class="item-label">切割计数</div>
          <div class="item-value">{{ cutCount }}</div>
          <div class="item-unit">次</div>
        </div>

        <!-- 切割速度 -->
        <div class="status-item">
          <div class="item-label">切割速度</div>
          <div class="item-value">{{ cutSpeed.toFixed(2) }}</div>
          <div class="item-unit">m/s</div>
        </div>

        <!-- 剩余寿命 -->
        <div class="status-item">
          <div class="item-label">刀具剩余寿命</div>
          <div class="item-value">{{ cutLife }}</div>
          <div class="item-unit">%</div>
          <div
              class="life-warning"
              v-if="cutLife < 30"
          >
            ⚠️ 寿命过低，请及时更换
          </div>
        </div>

        <!-- 发动机过载状态 -->
        <div class="status-item">
          <div class="item-label">发动机状态</div>
          <div class="item-value">
            <span :class="engineOverload === 0 ? 'normal' : 'overload'">
              {{ engineOverload === 0 ? '正常' : '过载' }}
            </span>
          </div>
        </div>
      </div>

      <div class="update-info">
        <span>最后更新时间：{{ updateTime }}</span>
        <button
            class="refresh-btn"
            @click="fetchData"
            :disabled="isLoading"
        >
          <span v-if="isLoading">刷新中...</span>
          <span v-else>手动刷新</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue'
import {getCuttingMachineStatus} from "@/api/equipment-service/machine.js";
// getCuttingMachineStatus()

// 状态数据
const cutCount = ref(0)
const cutSpeed = ref(0)
const cutLife = ref(0)
const engineOverload = ref(0)
const updateTime = ref('')
const isLoading = ref(false)
const errorMsg = ref('')

// 定时任务ID
let timer = null

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 请求数据方法
const fetchData = async () => {
  isLoading.value = true
  errorMsg.value = ''
  try {
    const response = await getCuttingMachineStatus()
    console.log(response)
    // 假设接口返回格式为 { code: 200, data: { cutCount, cutSpeed, cutLife, engineOverload, timestamp } }
      cutCount.value = response.cutCount || 0
      cutSpeed.value = response.cutSpeed || 0
      cutLife.value = response.cutLife || 0
      engineOverload.value = response.engineOverload || 0
      updateTime.value = formatTime(response.timestamp || Date.now())

  } catch (err) {
    console.error('请求切割机床状态失败：', err)
    errorMsg.value = '网络错误，请稍后重试'
  } finally {
    isLoading.value = false
  }
}

// 组件挂载时初始化
onMounted(() => {
  // 初始加载数据
  fetchData()

  // 定时刷新（每5秒一次）
  timer = setInterval(fetchData, 1000)
})

// 组件卸载时清理
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
</script>

<style scoped>
.cutting-machine-status {
  padding: 20px;
}

.status-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.card-title {
  margin: 0 0 20px;
  color: #333;
  font-size: 18px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.status-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  position: relative;
  transition: transform 0.3s ease;
}

.status-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.item-label {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.item-value {
  color: #333;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.item-unit {
  color: #999;
  font-size: 12px;
}

.life-warning {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 8px;
  font-weight: 500;
}

.normal {
  color: #52c41a;
}

.overload {
  color: #ff4d4f;
  font-weight: bold;
}

.update-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 13px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.refresh-btn {
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.3s;
}

.refresh-btn:disabled {
  background: #8cc5ff;
  cursor: not-allowed;
}

.refresh-btn:hover:not(:disabled) {
  background: #096dd9;
}
</style>